<template>
  <u-popup :show="show"
           :overlay="overlay"
           :closeable="closeable"
           :overlayStyle="overlayStyle"
           :closeOnClickOverlay="closeOnClickOverlay"
           :safeAreaInsetBottom="safeAreaInsetBottom"
           :round="round"
           :bgColor="bgColor"
           @close="handleClose"
           @touchmove.stop.prevent
           :mode="mode">
    <slot></slot>
  </u-popup>
</template>

<script>
export default {
  name: "l-popup",
  props: {
    /**是否显示弹窗*/
    show: {
      type: Boolean,
      default: false
    },
    /**是否显示遮罩*/
    overlay: {
      type: Boolean,
      default: true
    },
    /**是否显示关闭图标*/
    closeable: {
      type: Boolean,
      default: false,
    },
    /**遮罩自定义样式*/
    overlayStyle: {
      type: [String, Object],
      default: () => {
        return {
          background: 'rgba(0,0,0,0.5)'
        }
      }
    },
    /**点击遮罩是否关闭弹窗*/
    closeOnClickOverlay: {
      type: Boolean,
      default: true,
    },
    /**是否为留出底部安全距离*/
    safeAreaInsetBottom: {
      type: Boolean,
      default: true
    },
    /**设置圆角值*/
    round: {
      type: String,
      default: '0rpx'
    },
    /**背景色*/
    bgColor: {
      type: String,
      default: '#fff'
    },
    /**弹出方向*/
    mode:{
      type:String,
      default:'bottom'
    }
  },
  methods: {
    /**处理关闭*/
    handleClose() {
      this.$emit('update:show', false);
      this.$emit('handleClose',);
    }
  },
}
</script>

<style scoped lang="scss">

</style>
